import { GameModeManager, GameMode } from '@/core/GameModeManager';

export class DeathUI {
  private element: HTMLElement | null = null;
  private gameModeManager: GameModeManager;
  private isVisible = false;

  constructor(gameModeManager: GameModeManager) {
    this.gameModeManager = gameModeManager;
    this.createDeathUI();
  }

  private createDeathUI(): void {
    this.element = document.createElement('div');
    this.element.id = 'death-ui';
    this.element.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(139, 0, 0, 0.8);
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      color: white;
      font-family: monospace;
      text-align: center;
    `;

    // 死亡标题
    const title = document.createElement('h1');
    title.textContent = 'You Died!';
    title.style.cssText = `
      font-size: 48px;
      margin-bottom: 20px;
      color: #ff4444;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    `;
    this.element.appendChild(title);

    // 死亡原因
    const deathReason = document.createElement('p');
    deathReason.id = 'death-reason';
    deathReason.style.cssText = `
      font-size: 18px;
      margin-bottom: 30px;
      color: #cccccc;
    `;
    this.element.appendChild(deathReason);

    // 按钮容器
    const buttonContainer = document.createElement('div');
    buttonContainer.style.cssText = `
      display: flex;
      gap: 20px;
      flex-direction: column;
      align-items: center;
    `;

    // 重生按钮（仅在非硬核模式下显示）
    const respawnButton = document.createElement('button');
    respawnButton.id = 'respawn-button';
    respawnButton.textContent = 'Respawn';
    respawnButton.style.cssText = `
      padding: 15px 30px;
      font-size: 18px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-family: monospace;
      transition: background-color 0.3s;
    `;
    respawnButton.addEventListener('mouseover', () => {
      respawnButton.style.background = '#45a049';
    });
    respawnButton.addEventListener('mouseout', () => {
      respawnButton.style.background = '#4CAF50';
    });
    respawnButton.addEventListener('click', () => {
      this.handleRespawn();
    });
    buttonContainer.appendChild(respawnButton);

    // 观察者模式按钮（硬核模式下显示）
    const spectatorButton = document.createElement('button');
    spectatorButton.id = 'spectator-button';
    spectatorButton.textContent = 'Spectate World';
    spectatorButton.style.cssText = `
      padding: 15px 30px;
      font-size: 18px;
      background: #2196F3;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-family: monospace;
      transition: background-color 0.3s;
      display: none;
    `;
    spectatorButton.addEventListener('mouseover', () => {
      spectatorButton.style.background = '#1976D2';
    });
    spectatorButton.addEventListener('mouseout', () => {
      spectatorButton.style.background = '#2196F3';
    });
    spectatorButton.addEventListener('click', () => {
      this.handleSpectate();
    });
    buttonContainer.appendChild(spectatorButton);

    // 退出游戏按钮
    const quitButton = document.createElement('button');
    quitButton.textContent = 'Quit to Menu';
    quitButton.style.cssText = `
      padding: 10px 20px;
      font-size: 14px;
      background: #666;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-family: monospace;
      transition: background-color 0.3s;
    `;
    quitButton.addEventListener('mouseover', () => {
      quitButton.style.background = '#555';
    });
    quitButton.addEventListener('mouseout', () => {
      quitButton.style.background = '#666';
    });
    quitButton.addEventListener('click', () => {
      this.handleQuit();
    });
    buttonContainer.appendChild(quitButton);

    this.element.appendChild(buttonContainer);
    document.body.appendChild(this.element);
  }

  public show(deathReason: string = 'Unknown cause'): void {
    if (!this.element) return;

    this.isVisible = true;
    this.element.style.display = 'flex';

    // 设置死亡原因
    const reasonElement = this.element.querySelector('#death-reason') as HTMLElement;
    if (reasonElement) {
      reasonElement.textContent = deathReason;
    }

    // 根据游戏模式显示不同的按钮
    const currentMode = this.gameModeManager.getCurrentMode();
    const respawnButton = this.element.querySelector('#respawn-button') as HTMLElement;
    const spectatorButton = this.element.querySelector('#spectator-button') as HTMLElement;

    if (currentMode === GameMode.HARDCORE) {
      // 硬核模式：隐藏重生按钮，显示观察者按钮
      respawnButton.style.display = 'none';
      spectatorButton.style.display = 'block';
    } else {
      // 其他模式：显示重生按钮，隐藏观察者按钮
      respawnButton.style.display = 'block';
      spectatorButton.style.display = 'none';
    }

    // 暂停游戏（禁用鼠标锁定）
    document.exitPointerLock();
  }

  public hide(): void {
    if (!this.element) return;

    this.isVisible = false;
    this.element.style.display = 'none';
  }

  private handleRespawn(): void {
    // 通知游戏模式管理器处理重生
    this.gameModeManager.handlePlayerRespawn();
    this.hide();
    
    // 重新启用鼠标锁定
    document.body.requestPointerLock();
    
    // 触发玩家重生事件
    this.triggerPlayerRespawn();
    
    console.log('Player respawned');
  }

  private triggerPlayerRespawn(): void {
    // 创建自定义事件来通知游戏重生玩家
    const respawnEvent = new CustomEvent('playerRespawn', {
      detail: { reason: 'manual_respawn' }
    });
    document.dispatchEvent(respawnEvent);
  }

  private handleSpectate(): void {
    // 切换到观察者模式
    this.gameModeManager.switchMode(GameMode.SPECTATOR);
    this.hide();
    
    console.log('Switched to spectator mode');
  }

  private handleQuit(): void {
    // 退出到主菜单（这里可以实现具体的退出逻辑）
    console.log('Quit to menu requested');
    
    // 简单的页面刷新作为退出
    if (confirm('Are you sure you want to quit to menu? Unsaved progress will be lost.')) {
      window.location.reload();
    }
  }

  public isShowing(): boolean {
    return this.isVisible;
  }

  public updateForGameMode(mode: GameMode): void {
    if (!this.element || !this.isVisible) return;

    const respawnButton = this.element.querySelector('#respawn-button') as HTMLElement;
    const spectatorButton = this.element.querySelector('#spectator-button') as HTMLElement;

    if (mode === GameMode.HARDCORE) {
      respawnButton.style.display = 'none';
      spectatorButton.style.display = 'block';
    } else {
      respawnButton.style.display = 'block';
      spectatorButton.style.display = 'none';
    }
  }

  public dispose(): void {
    if (this.element && this.element.parentNode) {
      this.element.parentNode.removeChild(this.element);
    }
    this.element = null;
  }
}